<!--参数:  length 长度，number 0-->
      <!--height 高度，number 2-->
      <!--del 是否删除图表 Boolean false-->
      <!--clickDel 删除方法-->
<template>
  <div class="zx-slider-container">
    <p >{{title}}</p>
    <div class="zx-van-slider">
      <div class="zx-van-slider__bar" :style="{width: length + '%', height: height + 'px'}"></div>
    </div>
    <img v-if="del" @click="handleClick" class="del-icon" src="../../static/img/person.jpg" alt="">
  </div>
</template>
<script>
  export default {
    name: 'zx-progress',
    components: {},
    props: {
      length: {
        type: Number,
        default: 0
      },
      height: {
        type: Number,
        default: 2
      },
      del: {
        type: Boolean,
        default() {
          return false;
        }
      },
      title: {
        type: String,
        default() {
         return '熟练度';
        }
      },
    },
    data() {
      return {};
    },
    watch: {},
    computed: {},
    mounted() {
    },
    methods: {
      handleClick() {
          this.$emit('clickDel');
      }
    }
  }
</script>
<style scoped lang="less" type="text/less">
  @import url('../../static/style/var');

  .zx-slider-container {
    padding: 8px 10px;
    background-color: #ffffff;
    position: relative;
    .zx-van-slider {
      position: relative;
      border-radius: 999px;
      background-color: #e5e5e5;
    }
    .zx-van-slider__bar {
      position: relative;
      border-radius: inherit;
      background-color: #38f;
    }
    p {
      font-size: @title-font-size;
      color: @font-dault-color;
      padding: 5px 0;
    }
    .del-icon {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
</style>
